<mat-card>
  <mat-card-title>Edit Profile</mat-card-title>

  <form [formGroup]="reactiveForm" class="form-field-full">
    <div fxLayout="row wrap" fxLayoutGap="8px grid">

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Username</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="username" required>
          <mat-error *ngIf="reactiveForm.get('username').invalid">Please enter username
          </mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Email</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="email" required>
          <mat-error *ngIf="reactiveForm.get('email').invalid">
            {{getErrorMessage(reactiveForm)}}</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Gender</mat-label>
          <mat-select formControlName="gender" required>
            <mat-option>-- None --</mat-option>
            <mat-option value="1">male</mat-option>
            <mat-option value="2">female</mat-option>
          </mat-select>
          <mat-error *ngIf="reactiveForm.get('gender').invalid">Please select gender</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>City</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="city" required>
          <mat-error *ngIf="reactiveForm.get('city').invalid">Please enter city</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Address</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="address" required>
          <mat-error *ngIf="reactiveForm.get('address').invalid">Please enter address</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Company</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="company" required>
          <mat-error *ngIf="reactiveForm.get('company').invalid">Please enter company</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Mobile</mat-label>
          <input matInput placeholder="Simple placeholder" type="number" formControlName="mobile"
                 required>
          <mat-icon matSuffix>smartphone</mat-icon>
          <mat-error *ngIf="reactiveForm.get('mobile').invalid">Please enter mobile</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Tele</mat-label>
          <input matInput placeholder="Simple placeholder" type="number" formControlName="tele"
                 required>
          <mat-icon matSuffix>phone</mat-icon>
          <mat-error *ngIf="reactiveForm.get('tele').invalid">Please enter tele</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <mat-label>Website</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="website" required>
          <mat-error *ngIf="reactiveForm.get('website').invalid">Please enter website</mat-error>
        </mat-form-field>
      </div>

      <div fxFlex="50" fxFlex.lt-md="100">
        <mat-form-field>
          <input matInput [matDatepicker]="picker2" placeholder="Choose a date"
                 formControlName="date">
          <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
          <mat-datepicker #picker2></mat-datepicker>
          <mat-error *ngIf="reactiveForm.get('date').invalid">Please enter website</mat-error>
        </mat-form-field>
      </div>

    </div>

    <div fxLayout="row" fxLayoutAlign="end center">
      <button mat-raised-button color="primary" class="m-t-8">Save</button>
    </div>
  </form>

</mat-card>
